<template>
  <!-- <view class="tabbar" :style="{paddingBottom: safeBottom + 'px'}"> -->
  <view class="tabbar">
    <view class="item2" @click="changeTabbar(1)">
      <view v-if="index == 1" class="item-ischeck">
        <image class="image" src="/static/images/Group1355@2x.png" mode="aspectFill"></image>
        <text style="color: #FC4E17;">首页</text>
      </view>
      <view v-else class="item-ischeck">
        <image class="image" src="/static/images/Group1356@2x.png" mode="aspectFill"></image>
        <text>首页</text>
      </view>
    </view>

    <view class="item2" @click="changeTabbar(2)">
      <view v-if="index == 2" class="item-ischeck">
        <image class="image" src="/static/images/Group3162@2x.png" mode="aspectFill"></image>
        <text style="color: #FC4E17;">我的</text>
      </view>
      <view v-else class="item-ischeck">
        <image class="image" src="/static/images/Group316@2x.png" mode="aspectFill"></image>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "tabbar",
    data() {
      return {
        // index: ''
      };
    },
    props: {
      index: {
        type: Number,
        default: 1
      }
    },
    computed: {
      safeBottom() {
        return uni.getSystemInfoSync().safeAreaInsets.bottom
      }
    },

    methods: {
      changeTabbar(i) {
        // this.index = i
        if (this.index != 1 && i == 1) {
          uni.navigateTo({
            url: "/pages/driver_port/index"
          })
        } else if (this.index != 2 && i == 2) {
          uni.navigateTo({
            url: "/pages/driver_port/my"
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #f8f8f8;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .item2 {
    padding: 15rpx;
  }

  .tabbar .item-ischeck {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .image {
      width: 55rpx;
      height: 55rpx;
    }

    text {
      margin-top: 8rpx;
      // height: 35rpx;
      font-weight: 400;
      font-size: 25rpx;
      color: #666666;
      // line-height: 29rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
</style>
